<template>
  <div class="goodscontent">
    <!-- <div id="nav"></div> -->
    <img class="contenttop" :src="url1"></img>
    <div class="content2">
      <div class="content2left">
        <div class="content2lefttop">
          <div class="content2lefttoptitle">
            <h2 class="content2lefttoptitle1">
              {{ goodsData.goods_name }}
              <span class="goodscommentsbtn" @click="getgoodscomment"
                >商品评价</span
              >
            </h2>
            <span class="content2lefttoptitle2">{{
              goodsData.goods_english
            }}</span>
            <span class="content2lefttoptitle3">{{
              goodsData2.details_reserve
            }}</span>
            <p class="content2lefttoptitle4">
              <span class="tag" v-for="item in kouweiarr">{{ item }}</span>
            </p>
            <span class="content2lefttoptitle5">
              <span class="content2lefttoptitle5child1">口味基底</span>
              <span class="content2lefttoptitle5child2">{{
                goodsData2.details_flavor
              }}</span>
              <span class="content2lefttoptitle5child1">口感</span>
              <span class="content2lefttoptitle5child2">{{
                goodsData2.details_kougan
              }}</span>
              <span class="content2lefttoptitle5child1">口味</span>
              <span class="content2lefttoptitle5child2">{{
                goodsData2.details_kouwei
              }}</span>
              <span class="content2lefttoptitle5child1">甜味</span>
              <span class="content2lefttoptitle5child2">
                <img src="./images/dot01.png" v-for="index of sweets" />
                <img src="./images/dot02.png" v-for="index of Nosweets" />
              </span>
            </span>
            <div class="content2lefttoptitle6">
              {{ goodsData2.details_size }}
            </div>
          </div>
        </div>
        <div class="content2leftbottom">
          <p class="content2leftbottomtitle1">xxxxx</p>
          <p class="content2leftbottomtitle2">xxxxxx</p>
        </div>
      </div>
      <div class="content2right">
        <div class="content2rightcontent">
          <div class="content2rightcontent1">
            <span class="content2rightcontentred"> 换购 </span>
            <span class="content2rightcontenttext">
              买蛋糕可至购物车参加优惠换购
            </span>
          </div>
          <div class="content2rightcontent2">
            <span class="content2rightcontentred">
              {{ righttop1 }}
            </span>
            <span class="content2rightcontenttext">
              {{ righttop2 }}
            </span>
            <span class="getxiangqing"> 详情&nbsp;> </span>
          </div>
          <div class="content2rightcontent3">
            <p class="price">
              <span class="fuhao"> ￥ </span>{{ goodsData.goods_price }}
            </p>
            <div class="content2rightcontent3btn">
              <div class="bottombtn1" @click="changeisclickcar(goodsData.goods_id)">
                {{ addcars }}
              </div>
              <div class="bottombtn2" @click="buynow">
                {{ getnows }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <img :src="url2" class="content3">
    <content4and5></content4and5>
	<addcar v-if="$store.state.isclickcar">
		<template slot="cancel"><span @click="changeisclickcar">取消</span></template>
	</addcar>
  </div>
</template>

<script>
import addcar from "../ljy/addcar/addcar.vue"
import content4and5 from "./component/content4and5.vue";
export default {
	components: {
		addcar,
		content4and5
	},
  data() {
    return {
      righttop1: "赠券",
      righttop2: "新客首单完成赠券",
      addcars: "加入购物车",
      getnows: "立即订购",
      goodsData: "",
      goodsData1: "",
      goodsData2: "",
      url1: "",
	  url2:"",
      kouweiarr: "",
      sweets: "",
      Nosweets: "",
    };
  },
  methods: {
    getgoodscomment: function () {
      // console.log(111);
    },
    addcar: function () {
      // console.log(222);
    },
    buynow: async function () {
      // console.log(333);
      if (window.localStorage.getItem("isLogin")) {
        let res=await this.axios(`/ljy/addcar?goods_id=${this.$route.query.id}&goods_count=1`);
		console.log(res);
        this.$router.push("/Car");
      }
    },
	changeisclickcar(goods_id) {
	      this.$store.commit("changeGoodsid", goods_id);
	      this.$store.commit("changeIsclickcar");
	},
  },

  async mounted() {
    let res = await this.axios("/wrx/test");
    // console.log(this.$route.query.id);
    this.goodsData = res.data.ansor3[this.$route.query.id - 1];
    this.goodsData1 = res.data.goodsData1[this.$route.query.id - 1];
    this.goodsData2 = res.data.goodsData2[this.$route.query.id - 1];
    // console.log(this.goodsData2.details_kouwei);
    this.kouweiarr = this.goodsData2.details_kouwei.split("/");
    // console.log(this.$route.query.id);
    this.sweets = Number(
      res.data.goodsData2[this.$route.query.id - 1].details_sweet
    );
    this.Nosweets = Number(
      5 - res.data.goodsData2[this.$route.query.id - 1].details_sweet
    );

    // console.log(this.sweets);
    this.url1 = this.$store.state.url + this.goodsData1.goods_sonimg1;
	this.url2 = this.$store.state.url + this.goodsData1.goods_sonimg2;
    // console.log(this.url2);
  },
};
</script>

<style scoped="scoped">
.goodscontent {
  background-color: #f8f8f8;
  margin-top: 121px;
}

/* #nav {
		height: 120px;
		width: 100%;
		background-color: cornflowerblue;
	} */

.contenttop {
  /* height: 769px; */
  width: 100%;
  display: block;
  z-index: 80;
  /* background-color: aquamarine; */
  /* position: relative; */
}

.content2 {
  width: 1400px;
  height: 608px;
  background-color: white;
  /* margin-bottom: 68px; */
  margin: -100px auto 68px;
  display: flex;
  z-index: 10;
  position: relative;
  
  /* top: 100px;
		left: 0; */
  /* margin-bottom: 68px; */
}

.content2left {
  width: 910px;
  height: 100%;
  border-right: 1px solid #d6d6d6;
}

.content2lefttop {
  height: 501px;
  width: 100%;
  border-bottom: 1px solid #d6d6d6;
}

.content2lefttoptitle {
  width: 780px;
  padding-left: 109px;
}

.content2lefttoptitle1 {
  padding: 68px 0 8px;
  font-size: 26px;
  font-weight: 400;
}

.goodscommentsbtn {
  display: inline-block;
  margin-left: 9pt;
  width: 78px;
  height: 24px;
  border-radius: 25px;
  background-color: #ffe32a;
  font-size: 14px;
  text-align: center;
  line-height: 24px;
}

.content2lefttoptitle2 {
  display: block;
  margin-bottom: 24px;
  font-size: 14px;
}

.content2lefttoptitle3 {
  display: block;
  margin-bottom: 32px;
  font-size: 16px;
}

.content2lefttoptitle4 {
  margin-bottom: 28px;
}

.content2lefttoptitle4 .tag {
  display: inline-block;
  margin-right: 9pt;
  width: 78px;
  height: 24px;
  border-radius: 20px;
  line-height: 24px;
  font-size: 14px;
  background-color: #ffe32a;
  text-align: center;
}

.content2lefttoptitle5 {
  margin-bottom: 20px;
}

.content2lefttoptitle5child1 {
  display: inline-block;
  width: 98px;
  font-size: 14px;
  margin-top: 5px;
}

.content2lefttoptitle5child2 {
  width: 680px;
  display: inline-block;
  font-size: 14px;
}

.content2lefttoptitle5child2 img {
  margin-right: 9px;
}

.content2lefttoptitle6 {
  margin-top: 57px;
}

.content2leftbottom {
  width: 780px;
  padding-left: 109px;
  /* line-height: 24px; */
}

.content2leftbottomtitle1 {
  margin-top: 27px;
  font-size: 18px;
  margin-bottom: 4px;
}

.content2leftbottomtitle2 {
  font-size: 15px;
}

.content2right {
  padding-top: 18px;
  padding-left: 32px;
  width: 350px;
  height: 590px;
  /* background-color: red; */
}

.content2rightcontent {
  margin-top: 36px;
  padding-top: 20px;
  padding-bottom: 20px;
  /* height: 431px; */
  /* background-color: red; */
}

.content2rightcontent1 {
  font-size: 15px;
}

.content2rightcontent2 {
  margin-top: 10px;
  position: relative;
}

.content2rightcontentred {
  /* margin-bottom: 10px; */
  font-size: 15px;
  display: inline-block;
  width: 60px;
  height: 19px;
  border: 1px solid #e91820;
  border-radius: 20px;
  text-align: center;
  line-height: 20px;
  color: #e91820;
  margin-right: 10px;
}

.content2rightcontenttext {
  /* margin-bottom: 10px; */
  font-size: 15px;
  border-left: 1px solid #848484;
  margin-left: 4px;
  padding-left: 5px;
  color: #848484;
}

.getxiangqing {
  position: absolute;
  color: #848484;
  top: 0;
  right: 0;
  font-size: 16px;
}

.content2rightcontent3 {
  height: 177px;
  width: 300px;
  /* background-color: #FFE32A; */
  margin-top: 300px;
}

.content2rightcontent3 .price {
  margin-bottom: 48px;
  font-size: 28px;
}

.content2rightcontent3 .fuhao {
  font-size: 20px !important;
}

.content2rightcontent3 .bottombtn1 {
  display: inline-block;
  margin-right: 18px;
  width: 152px;
  height: 40px;
  font-size: 15px;
  text-align: center;
  line-height: 44px;
  border: 1px solid #d0d0d0;
  border-radius: 25px;
}

.content2rightcontent3btn {
  display: flex;
  /* width: 308px; */
}

.content2rightcontent3 .bottombtn2 {
  display: inline-block;
  /* margin-right: 18px; */
  width: 152px;
  height: 40px;
  font-size: 15px;
  text-align: center;
  line-height: 44px;
  border: 1px solid #ffe100;
  background-color: #ffe100;
  border-radius: 25px;
}

.content3 {
  width: 1400px;
  /* height: 3172px; */
  /* background-color: #e91820; */
  margin: 0 auto 84px;
  display: block;
}
</style>
